<template>
	<Loadiing v-show="showLoading" />
	<div class="topbar fixbox" :class="{topbarbg:isonth}">
		<div class="container flexbox">
			<h1><img :src="`${publicPath}images/logotop.png`"></h1>
			<div class="language" style="display: none;">
				<span @click="changeLan">{{langtext}}</span>
			</div>
		</div>			
	</div>
	<swiper direction='vertical' mousewheel ref="mySwiper" @slideChange="onSlideChange">
		<swiper-slide>
			<div class="myjumbotron">
				<div class="myjumbotron-inner">
					<div class="container animate__animated" :class="{animate__slideInDown:showactive==0}">
						<h1>
							<span>Decentralized</span>
							<span>Aggregate</span>
							<span>Exchange</span>
						</h1>
						<p>{{ $t("subtitle") }}</p>						
					</div>
					<div class="biglogo animate__animated" :class="{animate__backInUp:showactive==0}">
						<img :src="`${publicPath}images/logobig.webp`" class="hero-img" />
					</div>
				</div>			
			</div>
		</swiper-slide>
		
		<swiper-slide class="appcoon">
			<div class="row container">
				<div class="col-md-5 flexbox animate__animated" :class="{animate__backInLeft:showactive==1}">					
						<h2>{{$t("apptitle")}}</h2>
						<p>{{$t("appdesc")}}</p>								
				</div>					
				<div class="col-md-7 flexbox animate__animated" :class="{animate__backInRight:showactive==1}">
					<div class="phone">
						<img src="./assets/imgs/phone.webp" />
					</div>						
				</div>
			</div>	
		</swiper-slide>
		
		<swiper-slide class="description">
			<div class="container">
				<div class="row flexbox description-ov">
					<div class="des-left animate__animated" :class="{animate__fadeInLeft:showactive==2}">
						<h3>COMPLETELLY DECENTRALIZED EXCHANGE</h3>
						<img src="./assets/imgs/dimg-green.webp" />
						<span>Decentralized</span>
					</div>
					<div class="des-center animate__animated" :class="{animate__fadeInDown:showactive==2}">
						<img src="./assets/imgs/logo_big.webp" />
					</div>
					<div class="des-right animate__animated" :class="{animate__fadeInRight:showactive==2}">
						<h3>CENTRALIZED EXCHANGE EXPERIENCE</h3>
						<img src="./assets/imgs/dimg-blue.webp" >
						<span>Centralization</span>
					</div>
				</div>
				<div class="desclist animate__animated" :class="{animate__fadeInUp:showactive==2}">
					<div>
						<img src="./assets/imgs/d1.png" >
						<dl>
							<dt>SECURITY</dt>
							<dd>No one can own your assets except your private key</dd>
						</dl>
					</div>
					<div>
						<img src="./assets/imgs/d2.png" >
						<dl>
							<dt>HIGH-SPEED</dt>
							<dd>High-performance trading engine built on Dfinity</dd>
						</dl>
					</div>
					<div>
						<img src="./assets/imgs/d3.png" >
						<dl>
							<dt>NO DOWNTIME</dt>
							<dd>EveryThing is decentralized,trading engine & UI</dd>
						</dl>
					</div>
					<div>
						<img src="./assets/imgs/d4.png" >
						<dl>
							<dt>POLISHED UI</dt>
							<dd>Similar to the experience of a centralized exchange</dd>
						</dl>
					</div>
				</div>
			</div>			
		</swiper-slide>
		
		<swiper-slide class="order-pool">
			<div class="container">
				<div class="row flexbox animate__animated" :class="{animate__slideInUp:showactive==3}">
					<div class="col-md-6 flexbox op-left">											
						<h2>ORDER BOOK</h2>
						<div>
							<dl>
								<dd><img src="./assets/imgs/op1.png" ></dd>
								<dt>DETERMINACY</dt>
								<dd>Determine price expectations</dd>
							</dl>
							<dl>
								<dd><img src="./assets/imgs/op2.png" ></dd>
								<dt>TRADING HABIT</dt>
								<dd>More in line with common trading habits</dd>
							</dl>
						</div>						
					</div>			
							
					<div class="col-md-6 flexbox op-right">
						<h2>LIQUIDITY POOL</h2>
						<div>
							<dl>
								<dd><img src="./assets/imgs/op3.png" ></dd>
								<dt>INCENTIVES</dt>
								<dd>Better market maker incentives for. market maker</dd>
							</dl>
							<dl>
								<dd><img src="./assets/imgs/op4.png" ></dd>
								<dt>AUTOMATED MAKKET MAKER PROTOCAL</dt>
								<dd>AMM can provide better trading liquidity for the market</dd>
							</dl>
						</div>
												
					</div>
				</div>
			</div>
		</swiper-slide>
		
		<swiper-slide class="decentralized">			
			<div class="flexbox decentralized-inner animate__animated" :class="{animate__fadeIn:showactive==4}">
				<h2>Decentralized exchange on Dfinity</h2>
				<div><img src="./assets/imgs/test.jpg" width="1000" height="600" ></div>
			</div>			
		</swiper-slide>
		
		<swiper-slide class="contact">
			<img :src="`${publicPath}images/logodown.png`" class="animate__animated" :class="{animate__fadeInDownBig:showactive==5}" @load="handleLoad">
			<div class="form-w animate__animated" :class="{animate__zoomIn:showactive==5}">
				<h3>Subscribe to DELAND updates</h3>
				<div class="form-control-c">
					<input type="text" name="" id="" value="" placeholder="Enter your email address" />
					<button type="button">Sign Up</button>
				</div>
			</div>
			<div class="links animate__animated" :class="{animate__slideInUp:showactive==5}">
				<div class="container">	
					<ul class="flexbox">
						<li><img src="./assets/imgs/twitter.png" ><a href="">Twitter</a></li>
						<li><img src="./assets/imgs/medium.png" ><a href="">Medium</a></li>
						<li><img src="./assets/imgs/github.png" ><a href="">Github</a></li>
						<li><img src="./assets/imgs/discord.png" ><a href="">Discord</a></li>
					</ul>					
				</div>
			</div>
		</swiper-slide>
		
	</Swiper>
   
</template>

<script>
import SwiperCore, { Mousewheel }  from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import Loadiing from './components/Loadiing.vue'
import "swiper/swiper.min.css";
import './assets/style/bootstrap.min.css';
SwiperCore.use(Mousewheel); 
export default {
	
  name: 'App',
  components: {
	Swiper,
	SwiperSlide,
	Loadiing
  },
  data() {
  	return{
		publicPath: process.env.BASE_URL,
		showactive:0,
		isonth:false,
		langtext:'EN',
		showLoading:true
	}
  },

  methods: {
	handleLoad(e){
		this.showLoading = false
	},
	changeLan(){
		
		if(this.$i18n.getLocale() == 'en'){
			this.langtext = '中文'
			this.$i18n.setLocale('zh')
		}else{
			this.langtext = 'EN'
			this.$i18n.setLocale('en')
		}
		// this.$i18n.getLocale() == 'en'?this.$i18n.setLocale('zh'):this.$i18n.setLocale('en')
		// console.log()
	},
	onSlideChange(Swiper) {
		this.showactive = Swiper.activeIndex
		if(Swiper.activeIndex!=0){
			this.isonth = true
		}else{
			this.isonth = false
		}
		// console.log(Swiper.activeIndex);
	},
  }
}
</script>

<style lang="stylus">
	
@import 'assets/style/index.styl';
$path = '../public/'
#app {
	height 100%
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.swiper-container{	
	width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}
.swiper-slide {

	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.myjumbotron{
	position relative
	width 100%
	height 100%
	background-color #152137
	background: linear-gradient(180deg, #12213C 0%, #283E63 100%);
	text-align center
	color $colorTitle
	background-image: url($path + "images/bgbanner.jpg");
	background-position: center bottom;
	background-size cover;
	background-repeat: no-repeat;
	.container{
		height 100%
		padding-top 220px		 
		h1{
			font-size 40px
			span{				
				padding 0 5px 
				font-weight:bold;
				display inline-block
			}
			span:first-letter{
				// text-shadow:#1ea7e1 3px 4px 3px;
				background:rgba(30,167,225,.8)
				padding 0 2px
				border-radius 10%				
			}
			/* span:nth-child(2)::first-letter{
				border-radius 50% 50% 1% 1%
			}
			span:nth-child(3)::first-letter{
				border-radius 5% 5% 1% 1%
			} */
		}
		p{
			font-size :24px;
			padding-top 28px
			color rgba(255,255,255,.6)
		}
	}
	.biglogo{
		position absolute
		left 0%
		bottom 10%
		width 100%
		text-align center
	}
}

.appcoon{
	overflow hidden
	height 100%
	color $colorGray
	background linear-gradient(180deg, #121E33 0%, #202D48 100%)
	background-image url('./assets/imgs/descriptionbg.webp')
	background-size 50%
	background-position center 0
	background-repeat no-repeat	
	.container{
		height 100%
		h2{
			font-family "microsoft yahei"
			font-size 36px
			color $colorTitle
			margin-bottom 20px
			width 100%
		}
		p{
			font-family "microsoft yahei"
			font-size 20px
			line-height 160%
			width 100%
		}
		.flexbox{
			flex-direction column
			justify-content center		
			position relative
		}
		.phone{
			width 491px;
			height 477px;
			position relative
			&::before{
				content ''
				display block
				position absolute
				left -65px
				bottom 3px
				z-index 5
				width: 404px;
				height: 69px;
				background: linear-gradient(270deg, #000000 0%, rgba(0, 0, 0, 0.17) 100%);
				filter: blur(14px);
			}
		}
		img{
			position relative
			z-index 8
			
		}
	}
}

.description{
	background-color #101421
	position relative
	overflow hidden
	&::before{
		content ""
		display block
		width 150%
		background #212E4A
		height 50%;
		position absolute
		top -42%
		border-radius 100%
		// transform translateY(-10%)
	}
}

.description{
	.container{
		display flex
		flex-direction column
		height 100%
		justify-content space-around
		padding-top 2%
		.des-left,.des-right{
			display flex
			flex-direction column
			align-items center
			width 33.33%			
			h3{
				text-align center
				line-height 160%
				font-size 20px
				color rgba(255,255,255,0.8)
			}
			span{
				margin-top 10px
				font-size 24px
			}
		}
		.des-center{
			width 33.33%
		}
		.des-left{			
			background url(./assets/imgs/d-left.webp) no-repeat right top
			background-size cover
			span{
				color #4CD9B5
			}
		}
		.des-right{
			background url(./assets/imgs/d-right.webp) no-repeat left top
			background-size cover
			span{
				color #2DA0FF
			}
		}
	}
	.desclist{
		padding 10px 10%
		display flex
		flex-wrap wrap
		justify-content space-between
		&>div{
			width 45%
			margin-bottom 50px
			display flex
			img{
				width 90px
				height 90px
			}
			dl{
				padding-left 20px
				color #4CD9B5
				font-size 20px
				dd{
					padding-top 10px
					color rgba(225,225,225,.5)
					font-size: 18px;
					line-height 160%
				}				
			}			
		}
		&>div:nth-child(even){
			dt{
				color #2DA0FF
			}
		}
	}
}

.order-pool{
	background: linear-gradient(180deg, #0D1F37 0%, #3C5280 100%);
	overflow hidden
	.container{
		flex 1
	}
	.op-left,.op-right{
		justify-content flex-start
		flex-direction column
		h2{
			font-size: 28px;
			text-align left
			width 100%
			margin-bottom 80px
		}
		&>div{
			width 100%
			display flex
			flex-direction column
			align-items left
		}
		dl{
			min-height 190px
			width 100%
			margin-bottom 2%
		}
		dt{
			margin 15px 0 10px
			font-size 22px
			font-family "ADAM.CG PRO"
		}
		dd{
			line-height 160%
			color rgba(225,225,225,.5)
			font-size: 20px;
		}
	}
	.op-left{
		h2{
			color #4CD9B5
			
		}
	}
	.op-right{
		h2{
			color #2DA0FF
		}
	}
}
.decentralized-inner{
	flex-direction column
	justify-content space-around
	height 100%
}

.contact{
	flex-direction  column
	justify-content space-between
	padding-top 15%
	background-image url(assets/imgs/bgdown.webp);
	background-position top right
	background-repeat no-repeat
	.form-w{
		width: 990px;
		height: 188px;
		background: linear-gradient(360deg, #1D2540 0%, #29324D 100%);
		border-radius: 12px;
		position relative
		&::before{
			content ""
			display block
			left -35px
			bottom -30px
			position absolute
			width: 1060px;
			height: 30px;
			background: linear-gradient(180deg, #172237 0%, #1A273C 55%, rgba(15, 25, 40, 0) 100%);
			border-radius: 8px 8px 2px 2px;
			opacity: 0.5;
			filter: blur(4px);
		}
		
	}
	.links{
		width: 1440px;
		height: 88px;
		background: #191F34;
		.flexbox{
			align-items center
			height 88px
			font-size 16px
			img{
				vertical-align middle
			}
			a{
				color #8795BD
				transition all .3s
				padding-left 12px
				&:hover{
					color #2DA0FF
				}
			}
			
		}
	}
	.form-w{
		padding 0 30px
		h3{
			height 90px
			line-height 91px
			font-size 20px
		}
		input{
			width: 720px;
			height: 68px;
			background: rgba(16, 19, 32, .3)			
			border none
			border-radius: 12px;
			outline none
			vertical-align middle
			padding 0 10px
			color #fff
		}
		button{
			vertical-align middle
			margin-left 10px
			width: 190px;
			height: 68px;
			outline none
			cursor: pointer
			border none
			color #fff
			font-size 24px
			background: linear-gradient(270deg, #2588EB 0%, #26C9FF 100%);
			border-radius: 12px;
		}
	}
}
</style>
